<template>
	<div class="dialogContainer">
		<el-dialog title="选择媒体应用" :visible.sync="visible" @close="close">
			<div class="formBox">
				<el-form :inline="true" :model="search" class="demo-form-inline">
					<el-form-item label="所属事业部">
						<cl-select
							v-model="search.biz_id"
							placeholder="请选择"
							filterable
							@change="bizChange"
						>
							<el-option
								v-for="item in business"
								:key="item.biz_id"
								:label="item.biz_name"
								:value="item.biz_id"
							/>
						</cl-select>
					</el-form-item>
					<el-form-item label="品牌">
						<cl-select
							v-model="search.bra_id"
							placeholder="全部"
							filterable
							clearable
							@change="getMediaApplicationList([search.bra_id])"
						>
							<el-option
								v-for="item in bizRefData.brand"
								:key="item.bra_id"
								:label="item.bra_name"
								:value="item.bra_id"
							/>
						</cl-select>
					</el-form-item>
					<!-- <cl-flex1 /> -->
				</el-form>
			</div>
			<!-- 提示信息 -->
			<el-alert :title="'授权中...' + date" type="warning" :closable="false" v-if="waitFor">
			</el-alert>
			<el-alert title="授权成功" type="success" :closable="false" v-if="success"> </el-alert>
			<el-alert title="授权超时，请重试" type="error" :closable="false" v-if="overtime">
			</el-alert>
			<div class="radioBox">
				<div class="radio" v-for="item in appList" :key="item.id">
					<!-- <img :src="item.plat_logo" alt="" @click="changeRadio(item.id)" /> -->
					<img
						src="https://xingmi-crm.oss-cn-shenzhen.aliyuncs.com/app_logo/app_oc.png"
						alt=""
						@click="changeRadio(item.id)"
					/>
					<el-radio v-model="radio" :label="item.id">
						<span>{{ item.app_name }}</span>
					</el-radio>
				</div>
			</div>
			<div slot="footer" class="dialog-footer">
				<el-button @click="goBack">取消</el-button>
				<el-button type="primary" @click="authorizedAccount" :disabled="waitFor"
					>新增授权账户</el-button
				>
			</div>
		</el-dialog>
	</div>
</template>
<script>
import axios from "axios";
import dayjs from "dayjs";
export default {
	data() {
		return {
			search: {
				biz_id: "",
				bra_id: [],
				type: ""
			},
			visible: false,
			radio: "",
			appList: [],
			requestTimer: null,
			num: 0,
			waitFor: false,
			success: false,
			overtime: false,
			date: dayjs().format("YYYY-MM-DD HH:mm:ss")
		};
	},
	computed: {
		bizRefData() {
			const { biz_id } = this.search;
			return this.getBizRefData(biz_id);
		}
	},
	methods: {
		//开启
		open(type, biz_id) {
			this.appList = [];
			this.radio = "";
			this.num = 0;
			clearInterval(this.requestTimer);
			this.search = {
				biz_id: biz_id,
				type: type
			};
			setTimeout(() => {
				this.search.bra_id = this.bizRefData.brand[0].bra_id;
			});
			this.getMediaApplicationList(this.bizRefData.brand[0].bra_id);
			this.visible = true;
		},
		//关闭
		close() {
			this.goBack();
			this.$emit("refresh");
		},
		//切换左侧事业部
		bizChange(v) {
			this.search = {
				...this.search,
				bra_id: []
			};
			this.getMediaApplicationList();
		},
		//获取应用列表
		async getMediaApplicationList(bra_id) {
			const { biz_id, type } = this.search;
			let { data } = await this.$service.media.list({
				biz_id,
				bra_id: bra_id,
				page: 1,
				page_size: 999
			});
			this.appList = data;
		},
		//授权账户
		async authorizedAccount() {
			this.waitFor = false;
			this.success = false;
			this.overtime = false;
			clearInterval(this.requestTimer);
			if (!this.radio) {
				return this.$message.warning("请选择授权应用");
			}
			console.log(this.radio);

			const data = await this.$service.accountManage
				.oauthUrl({ id: this.radio })
				.catch(err => {
					this.$message.warning("授权失败，请重试");
				});


			window.open(data, "_blank");
			return false

			if (!data.result.code) {
				let state = data.result.state;
				window.open(data.result.url, "_blank");
				this.waitFor = true;

				setTimeout(() => {
					this.requestTimer = setInterval(async () => {
						let result = await axios.get("https://adxh.xmzmmr.com/Auth/urlCallback", {
							params: {
								state
							}
						});
						if (!result.data.result.code) {
							clearInterval(this.requestTimer);
							this.waitFor = false;
							this.success = true;
							this.$message.closeAll();
							return setTimeout(() => {
								this.success = false;
								this.visible = false;
							}, 3000);
						} else {
							this.num += 2;
							this.date = dayjs().format("YYYY-MM-DD HH:mm:ss");
							if (this.num > 40) {
								clearInterval(this.requestTimer);
								this.requestTimer = null;
								this.$message.closeAll();
								(this.waitFor = false), (this.overtime = true);
							}
						}
					}, 2000);
				}, 5000);
			} else {
				this.$message.warning("授权还未过期，无需重新授权");
			}
		},
		//点击图片选择
		changeRadio(id) {
			this.radio = id;
		},
		//取消按钮
		goBack() {
			clearInterval(this.requestTimer);
			this.requestTimer = null;
			this.$message.closeAll();
			this.visible = false;
			this.waitFor = false;
			this.success = false;
			this.waitFor = false;
		}
	}
};
</script>
<style lang="scss" scoped>
.dialogContainer {
	text-align: center;

	::v-deep .el-dialog__body {
		border-top: 1px solid #ccc;
	}

	.formBox {
		text-align: left;
	}

	.radioBox {
		display: flex;
		flex-wrap: wrap;
		cursor: pointer;

		.radio {
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			width: 20%;
			height: 20%;

			img {
				width: 100%;
				height: 100%;
				margin: 20px 0;
			}
		}
	}
}
</style>
